<template>
  <!-- <div> -->
  <!-- 点击叉号的时候并没有修改父组件中的showDialogFn
          在组件内部触发了一个自定义事件close
          .sync
     -->
  <el-dialog
    type="primary"
    title="新增部门"
    :visible="showViewDialog"
    @close="showDialogFn"
    @open="openLIistFn"
  >
    <el-form ref="depFrom" label-width="120px" :model="depFrom" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input
          v-model="depFrom.name"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input
          v-model="depFrom.code"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="depFrom.manager"
          style="width: 80%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in employeeList"
            :key="item.id"
            :value="item.username"
            :label="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="depFrom.introduce"
          style="width: 80%"
          placeholder="1-300个字符"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="footer">
        <el-button
          type="primary"
          size="small"
          @click.native="comfireFn"
        >确定</el-button>
        <el-button size="small" @click.native="showDialogFn">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- </div> -->
</template>

<script>
import { getEmployeeSimpleAPI } from '@/api/employees'
import { addDepartmentsAPI, getDepartDetailAPI, updateDepartmentsAPI } from '@/api/departments'

export default {
  name: 'AddDpt',
  props: {
    showViewDialog: { // 弹框显示与隐藏
      type: Boolean
    },
    curDpt: { // 当前部门对象
      type: Object,
      default() {
        return {}
      }
    },
    codeList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  data() {
    const validateCode = (rule, value, callback) => {
      console.log(value)
      // 1. 拿到所有的原始节点数据  allList
      // 2. allDptList里面每一项的code码拿到组成一个新数组
      // const codeList = this.allDptList.map(item => item.code)
      let curCodeList = []// 作为判断条件的，因为codelist是双向数据绑定
      if (this.depFrom.id) {
        curCodeList = this.codeList.filter(item => item !== this.curCode)
      } else {
        curCodeList = this.codeList
      }
      if (curCodeList.includes(value)) {
        return callback(new Error('当前code码重复'))
      } else {
        callback()
      }
    }
    return {
      depFrom: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: ['blur', 'change'] },
          { validator: validateCode, message: '部门编码不允许重复提交', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门管理者不能为空', trigger: ['blur', 'change'] }

        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: ['blur', 'change'] }
        ]
      },
      employeeList: [],
      curCode: null// 当前code,暂存
    }
  },
  // mounted() {
  //   this.getEmployeeSimpleFn()
  // },
  methods: {
    // 关闭弹框
    showDialogFn() {
      this.$emit('closeDialog')
      this.depFrom = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍

      }
      // 初始化数据，清空表单数据（有坑） 默认绑定的字段 新增的无法清空，需要我们手动
      this.$refs.depFrom.resetFields()
    },
    // 使用dialog的open事件，等到我们要去显示弹框了，再让他去获取数据，优化好
    openLIistFn() {
      this.getEmployeeSimpleFn()
      // this.getDepartDetail()//点击弹框再获取数据，但会同时发送2个接口，1，是判断2，去父组件找合适时机发送
    },
    // 获取数据
    async getEmployeeSimpleFn() {
      const res = await getEmployeeSimpleAPI()
      console.log(res)
      this.employeeList = res.data
    },
    // 兜底校验-新增-编辑
    comfireFn() {
      this.$refs.depFrom.validate(async valid => {
        if (valid) {
          // 如果检验正确，
          // 编辑
          if (this.depFrom.id) {
            await updateDepartmentsAPI(this.depFrom)
          } else {
            // 新增部门
            await addDepartmentsAPI({ ...this.depFrom, pid: this.curDpt.id })// 我是传了一个对象，要id，所以点
          }

          // 调用关闭弹框
          this.showDialogFn()
          this.$emit('update-departs')
        }
      })
    },
    // // 拉取数据
    // async getDepartDetail() {
    //   const res = await getDepartDetailAPI(this.curDpt.id)
    //   console.log(res)
    //   this.depFrom = res.data
    // }
    // 拉取数据
    async getDepartDetail(id) {
      const res = await getDepartDetailAPI(id)
      console.log(res)
      this.depFrom = res.data
      this.curCode = res.data.code// 当前给一个变量
    }
  }
}

</script>

<style>
.footer {
  text-align: center;
}
</style>
